<template>
	<div>
		<!-- 底部导航 -->
		<div class="C">
			<div class="container">
				<div class="stair">
					<div class="stair_ul">
						<ul>
							<li class="title">动物乐园</li>
							<li><a href="#">车行区</a></li>
							<li><a href="">步行区</a></li>
						</ul>
						<ul>
							<li class="title">游玩演艺</li>
							<li><a href="">亲子乐园</a></li>
						</ul>
						<ul>
							<li class="title">活动优惠</li>
							<li><a href="">新闻</a></li>
							<li><a href="">优惠信息</a></li>
							<li><a href="">主题活动</a></li>
						</ul>
						<ul>
							<li class="title">研学互动</li>
							<li><a href="">研学课堂</a></li>
							<li><a href="">动物互动</a></li>
						</ul>
						<ul>
							<li class="title">美味餐饮</li>
						</ul>
						<ul>
							<li class="title">计划行程</li>
							<li><a href="">游园指南</a></li>
							<li><a href="">游园提示</a></li>
							<li><a href="">园区时间</a></li>
							<li><a href="">交通指南</a></li>
							<li><a href="">常见问题</a></li>
							<li><a href="">地图下载</a></li>
							<li><a href="">游玩路线</a></li>
						</ul>
						<ul>
							<li class="title">关于我们</li>
							<li><a href="">园区简介</a></li>
						</ul>
					</div>
					<div class="stair_img">
						<div class="s_img1">
							<img src="../assets/img/code.jpg" alt="" />
							<h4>官网微信</h4>
						</div>
						<div class="s_img2">
							<img src="../assets/img/code2.jpg" alt="" />
							<h4>官方小程序</h4>
						</div>
					</div>
					<!-- <div class="stair_img2">
 
        </div> -->
					<a href="https://weibo.com/show8ox?topnav=1&wvr=6&topsug=1">
						<!-- <img src="../assets/img/wb.png" alt="" /> -->
					</a>
				</div>
				<!-- 咨询电话 -->
				<div class="stair_1">
					<div class="stair_1_phone">咨询电话：400-102-6688</div>
					<div class="stair_1_time">
						客服电话服务时间（8:30-17:30）
					</div>
				</div>
			</div>
			<div class="hell">
				杭州野生动物世界有限公司 版权所有 【
				<a>互动力</a> 承建 运营】
				<a>浙ICP备12012113号-1 </a>
				<a>浙公网安备 33018302000335号</a> 可信任网站
			</div>
		</div>
	</div>
</template>

<script>
export default {}
</script>

<style scoped>
* {
	padding: 0;
	margin: 0;
}
li {
	list-style: none;
}
.container {
	width: 80%;
	margin: 0 auto;
}
/* 绿色背景图 */

/******最底部 ******/
.C {
	background-image: url(../assets/img/footerBg.jpg);
	background-position-x: center;
	background-position-y: center;
	/* background-repeat-x: initial;
  background-repeat-y: initial; */
	background-attachment: fixed;
	background-origin: initial;
	background-clip: initial;
	background-color: initial;
	background-size: cover;
}
.stair {
	display: flex;
	padding-top: 40px;
	position: relative;
}
.stair > .stair_ul {
	display: flex;
	padding: 0 15px;
	background-size: cover;
	width: 66.6%;
}
/* ul */
.stair_ul ul {
	width: 14%;
	padding: 0;
	margin-bottom: 10px;
	margin: 0;
}
.stair_ul ul a {
	text-decoration: none;
	color: #fff;
	font-size: 12px;
	line-height: 28px;
}
/* li字 */
.stair_ul ul .title {
	margin-bottom: 10px;
	font-size: 16px;
	color: #fff;
	font-weight: bold;
}
/* 扫码模块 */
.stair > .stair_img {
	/* display: block; */
	display: flex;
	width: 30%;
}
.stair > .stair_img > .s_img1,
.s_img2 {
	padding: 0 15px;
}
.stair > .stair_img img {
	width: 102px;
	height: 101px;
}
.stair > .stair_img h4 {
	/* position: absolute; */
	display: block;
	color: #fff;
	margin: 10px 0;
	font-weight: 500;
	font-size: 15px;
	text-align: center;
}
/* .stair > .stair_img2 {
  display: block;
} */
.stair > a img {
	/* display: block; */
	position: absolute;
	right: 20%;
	top: 85%;
	transform: translateY(-50%);
}

.stair_1 {
	padding-bottom: 50px;
	color: #fff;
	text-align: center;
}
.stair_1 > .stair_1_phone {
	margin-top: 50px;
	font-size: 44px;
}
.stair_1 > .stair_1_time {
	padding-top: 50px;
	font-size: 14px;
}
.hell {
	height: 52px;
	width: 100%;
	background-color: #000;
	color: #a6a5a4;
	text-align: center;
	margin-top: 30px;
	line-height: 52px;
	font-size: 14px;
}
.hell a:hover {
	cursor: pointer;
}
</style>
